<template>
  <el-card>
    <template #header>
      <h2>用户管理</h2>
      <el-button type="primary" link @click="addDialogVisible = true">添加</el-button>
      <el-button type="primary" link @click="deleteUsersByIds">删除选中</el-button>
    </template>
    <UsersSearch
      v-model:searchValue="svalue"
      v-model:searchField="sfield"
      @search="
        page.currentPage = 1;
        searchUsers();
      "
    ></UsersSearch>

    <!-- 用户表 -->
    <UsersTable ref="table" @edit="handleEditUser" @delete="handleDeleteUser"></UsersTable>

    <!-- 用户分页 -->
    <UsersPage ref="page" :total="table ? table.usersCount : 0" @change="searchUsers"></UsersPage>
  </el-card>

  <el-dialog v-model="addDialogVisible" title="添加用户">
    <UsersAdd @save="handleAddSave" @cancel="handleAddCancel"></UsersAdd>
  </el-dialog>

  <el-dialog v-model="editDialogVisible" title="编辑用户">
    <UsersEdit :id="editId" @save="handleEditSave" @cancel="handleEditCancel"></UsersEdit>
  </el-dialog>
</template>
<script setup>
import { ref, shallowRef, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

import { deleteUserByIdApi, deleteUsersByIdsApi } from '@/api/users';

import UsersTable from './components/UsersTable.vue';
import UsersSearch from './components/UsersSearch.vue';
import UsersPage from './components/UsersPage.vue';
import UsersAdd from './components/UsersAdd.vue';
import UsersEdit from './components/UsersEdit.vue';

const table = shallowRef(null);
const page = shallowRef(null);

const addDialogVisible = ref(false);
const editDialogVisible = ref(false);

const editId = ref();
// const deleteId = ref();

// -----

const svalue = ref('');
const sfield = ref('username');

const where = computed(() => {
  if (svalue.value && sfield.value) {
    return { searchField: sfield.value, searchValue: svalue.value };
  }
  return {};
});

function searchUsers(e = {}) {
  table.value.getUsers({
    ...where.value,
    ...e,
  });
}
// 添加后刷新页面（数据）
function handleAddSave() {
  addDialogVisible.value = false;
  table.value.getUsers({
    ...where.value,
  });
}
// 编辑后刷新页面（数据）
function handleEditSave() {
  editDialogVisible.value = false;
  table.value.getUsers({
    ...where.value,
  });
}
// 关闭添加对话框
function handleAddCancel() {
  addDialogVisible.value = false;
}
// 关闭编辑对话框
function handleEditCancel() {
  editDialogVisible.value = false;
}

// 编辑
function handleEditUser(e) {
  editId.value = e;
  editDialogVisible.value = true;
}

// 删除
async function handleDeleteUser(e) {
  await ElMessageBox.confirm('确定删除？', '删除', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  });
  await deleteUserByIdApi(e);
  table.value.getUsers({
    ...where.value,
  });
}

// 批量删除

async function deleteUsersByIds() {
  const ids = table.value.usersIds;
  if (ids.length === 0) {
    ElMessage.error('请选择要删除的记录');
    return;
  }
  await ElMessageBox.confirm('确定删除？', '删除', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  });
  await deleteUsersByIdsApi(ids);
  table.value.getUsers({
    ...where.value,
  });
}
</script>
